<template>
  <div>
    <div class="coupon-window" :class="value && !type ? 'on' : type===1 && value ? 'on novice' : type===2 && value ? 'on first' : ''"  @click="type ? checked() : ''" >
      <div v-if="!type">
        <div class="couponWinList">
          <div
            class="item acea-row row-between-wrapper"
            v-for="(item, index) in couponList"
            :key="index"
          >
            <div class="money font-color-orange">
              ￥<span class="num">{{ item.coupon_price }}</span>
            </div>
            <div class="text">
              <div class="name">
                购物买{{ item.use_min_price }}减{{ item.coupon_price }}
              </div>
              <div v-if="item.end_time">
                {{ item.start_time ? item.start_time + "-" : ""
                }}{{ item.end_time }}
              </div>
            </div>
          </div>
          <div style="height:1.2rem"></div>
        </div>
        <div class="lid">
          <div class="bnt font-color-main" @click="checked">立即领取</div>
          <div class="iconfont icon-guanbi3" @click="close"></div>
        </div>
      </div>
      <div v-if="type === 1">
        <div class="font-color-yellow-lt text-underline text-center countdowns">{{ countdowns }} 后过期</div>
        <div class="close-btn">
          <div class="iconfont icon-guanbi3 font-color-white iconfont-lg" @click.stop="close"></div>
        </div>
      </div>
      <div v-if="type === 2">
        <div class="close-btn">
          <div class="iconfont icon-guanbi3 font-color-white iconfont-lg" @click.stop="close"></div>
        </div>
      </div>
    </div>
    <div class="mask" @touchmove.prevent :hidden="!value"></div>
  </div>
</template>
<style scoped>
  .countdowns {
    position: absolute; 
    bottom: 1.9rem; 
    left: 50%; 
    transform: translateX(-50%);
  }

  .close-btn {
    position: absolute;
    bottom: -1.2rem;
    left: 50%; 
    transform: translateX(-50%);
  }
</style>
<script>
import { mapGetters } from "vuex";
import toLogin from "@libs/login";
import { couponReceiveBatch, getCouponReceive } from "@api/user";

export default {
  name: "CouponWindow",
  props: {
    couponList: {
      type: Array,
      default: () => []
    },
    type: {
      type: Number,
      default: 0
    }
  },
  computed: mapGetters(["isLogin"]),
  data: function() {
    return {
      value: true,
      countdowns: '02:00:00: 09',
    };
  },
  created: function() {
    if (this.type === 1 && this.value) {
      this.countdownsTime();
    }
  },
  methods: {
    // 倒计时文字格式化
    timeFormat(param) {
      return param < 10 ? '0' + param : param;
    },
    // 倒计时
    countdownsTime() {
      let ms = 10;
      let endTime = new Date().getTime() + (2*60*60*1000); //结束时间
      var timer = setInterval(() => {
        let nowTime = new Date().getTime(), obj;
        // 获取时间差、天、时、分、秒
        if (endTime - nowTime > 0) {
          let time = (endTime - nowTime) / 1000; 
          let day = parseInt(time / (60 * 60 * 24)); 
          let hour = parseInt(time % (60 * 60 * 24) / 3600); 
          let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
          let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);   
          ms--;    
          if (ms === -1) {
            ms = 9;
          }  
          obj = {
            day: this.timeFormat(day),
            hour: this.timeFormat(hour),
            min: this.timeFormat(min),
            sec: this.timeFormat(sec),
            ms: this.timeFormat(ms)
          };
        } else {
          obj = {
            day: '00',
            hour: '00',
            min: '00',
            sec: '00',
            ms: '00'
          }
          clearInterval(timer);
        }
        this.countdowns = `${obj.day == '00' ? '' : obj.day + ':'}${obj.hour}:${obj.min}:${obj.sec}: ${obj.ms}`;
      }, 100);
    },
    checked() {
      if (this.type === 2) { this.close(); this.$router.push({ path: '/activity/list?type=privilege&id=2' }); return; }
      const isLogin = this.isLogin;
      if (!isLogin) { 
        toLogin();
        return;
      };
      let ids;
      if (!this.type) {
        ids = this.couponList.reduce((initial, coupon) => {
          initial.push(coupon.id);
          return initial;
        }, []);
        couponReceiveBatch(ids)
        .then(() => {
          this.$emit("success");
          this.$dialog.toast({ mes: "领取成功" });
        })
        .catch(() => {
          this.$dialog.toast({ mes: "已领取过" });
        });
      }
      if (this.type === 1) { 
        getCouponReceive(6).then((res) => {
          this.$emit("success");
          this.$dialog.toast({ mes: "领取成功" });
        })
        .catch((err) => {
          console.log(err);
          this.$dialog.toast({ mes: "已领取过" });
        });
      }
      if (isLogin) {
        this.value = false;
        this.$emit("checked");
      }
    },
    close: function() {
      this.value = false;
      this.$emit("close");
    }
  }
};
</script>
